import React, { Component } from 'react'
import {
    View,
    StyleSheet,
    Image,
    TextInput,
    Text,
    ScrollView,
    TouchableOpacity,
    Modal,
} from 'react-native'

// import { Tab, Tabs } from 'native-base';
import AsyncStorage from '@react-native-community/async-storage';
import Video from 'react-native-video';
import NavBar from '../../components/PublicHeader';
import fetchWebApi from '../../public/WebApi/fetchBase';
import getStorageValue from '../../utils/getStorageValue';
import FunctionMenuList from './functionMenuList/functionMenuList';
import Layer from '../../utils/Layer';
import ChatList from '../ChatList/ChatList'
import ChatListRightButton from '../ChatList/ChatListRightButton'

import {
    deviceWidth,
    deviceHeight,
} from '../../utils/Global';
import {
    Constant
} from '../../public/js/constant';
import {
    messageEllipsis
} from '../../utils/publicMethodList'; // 公共方法 省略符
import {
    GET_USER_MESSAGES_LIST
} from '../../public/WebApi/msgDataInterface/messageListApi';

export default class message extends Component {
    constructor(props) {
        super(props)
        this.state = {
            // 头部右边添加好友Icon
            headerRightImage: require("../../assets/images/headerIcon/AddFriends.png"),
            // 头部标题
            messageTitle: "俊码星球",
            // 消息页面布局默认 true为设置个性样式 否则取反（后期根据数据进行修改）
            messageLayoutDefault: true,
            // 是否显示弹窗
            isModal: false,
            // 点击功能菜单栏默认值
            transferDataTitle: '好友',
            // transferDataTitle: '0',
            // 默认个性化设置时 点击默认值
            stemNotificationTitle: "",
            // 清除消息通知
            transferDataNotice: null,

            defaultV: require('../../assets/video/1656922172341410.mp4'),
            del: require("../../assets/images/iconResources/del.png"),
            switchSkin: require('../../assets/images/iconResources/switchSkin.png'),

            isModalVideo: false,
            isModalVideoNum: 1,
            isVisible: false,
            videoUrl: '',
            videoWidth: deviceWidth,
            videoHeight: deviceHeight, // 默认16：9的宽高比
            showVideoCover: true, // 是否显示视频封面
            showVideoControl: true, // 是否显示视频控制组件
            isPlaying: true, // 视频是否正在播放
            currentTime: 0, // 视频当前播放的时间
            duration: 0, // 视频的总时长
            isFullScreen: false, // 当前是否全屏显示
            playFromBeginning: true, // 是否从头开始播放
            messagesList: [],
            // 消息列表数据 
            // 弹窗框数据列表
            popUpList: [
                {
                    item: "添加好友",
                    url: "addfriends"
                },
                {
                    item: "扫一扫",
                    url: "scanAndAddFriends"
                },
            ],
        };
    }
    componentDidMount = () => {
        // 获取消息列表
        // this.getUserMessagesList()
    }
    // 获取消息列表
    async getUserMessagesList() {
        const {
            messagesList
        } = this.state
        const res = await fetchWebApi(GET_USER_MESSAGES_LIST,
            {
                token: await getStorageValue(Constant.TOKEN)
            }, 'GET');
        if (res.status === 200) {
            if (res.status === 200 &&
                messagesList.length > 0) {
                // 判断显示弹窗视频
                this.isModalVideoFN()
            }
        } else if (res.status === 401) {
            await AsyncStorage.removeItem(Constant.TOKEN);
            this.props.navigation.push('Accountlogin')
            // 弹窗提示
        } else {
            // 弹窗提示
            Layer.showMsg("获取消息列表失败");
            return
        }
    }

    // 判断当前点击的功能菜单
    layoutFunctionMenuList = (title = "好友", item) => {
        this.setState({
            transferDataTitle: title
        })
    }
    // layoutFunctionMenuList = (currentTab = "1", item) => {
    //     this.setState({
    //         transferDataTitle: currentTab
    //     })
    // }

    notificationRegion = (title) => {
        const {
            messageLayoutDefault,
            stemNotificationTitle
        } = this.state
        if (!messageLayoutDefault) {
            this.props.navigation.push('functionMenuList',)
            if (stemNotificationTitle) {
                this.setState({
                    stemNotificationTitle: title
                })
            }
        }
    }
    // 切换后已阅读 通知数量清理 
    functionMenuLists = (item) => {
        this.setState({
            notice: item.notice = 0
        })
        this.setState({
            transferDataNotice: item.notice = 0
        })
    }
    // 消息通知提示
    noticeStemNotification = (item) => {
        if (item.notice > 0) {
            return (
                <View style={styles.noticeStemNotification}>
                    <Text style={styles.noticeStemText}>
                        {item.notice}
                    </Text>
                </View>
            )
        }
    }
    // 系统菜单栏切换
    // notificaActionFN(index) {
    //     const {
    //         pageDatas
    //     } = this.state
    //     const notificaAction = pageDatas.notificationList
    //     notificaAction.map((item, notificaActionIndex) => {
    //         this.setState({
    //             SelectedState: item.SelectedState = false
    //         })
    //         if (index == notificaActionIndex) {
    //             this.setState({
    //                 SelectedState: item.SelectedState = !item.SelectedState
    //             })
    //         }
    //     })
    // }

    setVideoUrl = url => {
        this.setState({ videoUrl: url });
    };
    showOrDismiss = flag => {
        this.setState({ isVisible: flag });
    };

    onChangeText(text) {
        this.setState({
            searchText: text
        })
    };

    // 皮肤切换
    switchSkinFN() {
        this.setState({
            isModalVideo: false
        })
        this.props.navigation.push("Backgroundvideo")
    }
    isModalVideoFN() {
        this.setState({
            isModalVideo: true
        })
    }
    isModalVideoNO() {
        this.setState({
            isModalVideo: false
        })
    }
    render() {
        const {
            del,
            portrait,
            pageDatas,
            switchSkin,
            isModalVideo,
            isPlaying,
            popUpList,
            defaultV,
            isModal,
            messageTitle,
            headerRightImage,
            transferDataTitle,
            messageLayoutDefault,
            transferDataNotice,
            stemNotificationTitle
        } = this.state
        // 为了代码简洁 提取成一个集合 默认布局时显示系统列表区
        // const StemNotificationRegion =
        //     <View>
        //         {pageDatas.notificationList.map((item, index) => {
        //             return (
        //                 <TouchableOpacity key={index}
        //                     onPress={() => {
        //                         this.notificationRegion(item.title, item)
        //                         // 切换后已阅读
        //                         this.functionMenuLists(item)
        //                     }}>
        //                     <View style={styles.itemNotificationBox}
        //                         key={index} >
        //                         <View style={styles.row}>
        //                             <Image style={styles.promptNotification}
        //                                 source={item.headPortrait} />
        //                             <View>
        //                                 <Text style={styles.titleNotification}>
        //                                     {item.title}
        //                                 </Text>
        //                                 {/* 文本超出时省略符 */}
        //                                 <Text style={styles.newsNotification}>
        //                                     {messageEllipsis(item.messagesTheOther)}
        //                                 </Text>
        //                             </View>
        //                         </View>
        //                         {/* 消息通知时间/个数 */}
        //                         <View style={styles.rowBoxBtn}>
        //                             <Text style={styles.timeRightFriend}>
        //                                 {item.time}
        //                             </Text>
        //                             <View style={item.notice > 0 ?
        //                                 styles.noticeNotification : ''}>
        //                                 <Text style={styles.noticeStemText}>
        //                                     {item.notice}
        //                                 </Text>
        //                             </View>
        //                         </View>
        //                     </View>
        //                 </TouchableOpacity>
        //             )
        //         })}
        //     </View>

        // 消息页面个性布局
        // const MessagePageLayoutBox =
        //     <View style={styles.padlr}>
        //         {/* <> */}
        //         {/* 判断是否设置个性布局样式 true为是 否则取反 */}
        //         {messageLayoutDefault ?
        //             <View style={styles.StemNotificationBox}>
        //                 {pageDatas.notificationList.map((item, index) => (
        //                     <TouchableOpacity key={index}
        //                         onPress={() => {
        //                             // 判断当前点击的功能菜单
        //                             this.layoutFunctionMenuList(item.title, item)
        //                             // 切换后已阅读
        //                             this.functionMenuLists(item)
        //                             // 系统菜单栏切换
        //                             this.notificaActionFN(index)
        //                         }}>
        //                         <View style={styles.itemNotification}
        //                             key={index} >
        //                             {/* 消息通知清空 */}
        //                             {this.noticeStemNotification(item)}
        //                             <Image style={styles.systemPromptSystem}
        //                                 source={item.headPortrait} />
        //                             <Text style={item.SelectedState ?
        //                                 styles.titleSystemAction :
        //                                 styles.titleSystemNo}>
        //                                 {item.systemTitle}
        //                             </Text>
        //                         </View>
        //                     </TouchableOpacity>

        //                 ))}
        //                 {/* 取反则为StemNotificationBoxRegion */}
        //             </View> : StemNotificationRegion}

        //         {/* 实现可滑动  */}
        //         {/* <Tabs
        //                 tabBarPosition="top"
        //                 initialPage={0}
        //                 onChangeTab={({ i }) => {
        //                     // 点击切换 tabs 内容
        //                     this.layoutFunctionMenuList(i)
        //                     // 系统菜单栏切换
        //                     this.notificaActionFN(i)
        //                 }}
        //                 tabContainerStyle={{
        //                     backgroundColor: 'transparent',
        //                     height: 100,
        //                 }}
        //             >
        //                 {this.state.pageDatas.notificationList.map((item, index) => (
        //                     <Tab
        //                         key={index}
        //                         heading={
        //                             <View style={styles.itemNotification}>
        //                                 {/* 消息通知清空 */}
        //         {/* {this.noticeStemNotification(item)}
        //                                 <Image style={styles.systemPromptSystem} source={item.headPortrait} />
        //                                 <Text style={item.SelectedState ?
        //                                     styles.titleSystemAction : styles.titleSystemNo}>{item.systemTitle}</Text>
        //                             </View>
        //                         } */}
        //         {/* // 切换后已阅读
        //                     // this.functionMenuLists(item)
        //                     // this.props.navigation.push('functionMenuList', { data: item })
        //                     > */}
        //         {/* <TouchableOpacity onPress={() => {
        //                                  this.layoutFunctionMenuList(item.title, item)
        //                                  // 切换后已阅读
        //                                  this.functionMenuLists(item)
        //                                  // 系统菜单栏切换
        //                                  this.notificaActionFN(index)
        //                                  // this.props.navigation.push('functionMenuList', { data: item })
        //                              }}> */}
        //         {/* <FunctionMenuList
        //                             transferDataTitle={this.state.transferDataTitle}
        //                             transferDataThis={this}
        //                             transferDataNotice={this.state.transferDataNotice}
        //                             stemNotificationTitle={this.state.stemNotificationTitle}
        //                         /> */}
        //         {/* </TouchableOpacity> */}
        //         {/* </Tab > */}
        //         {/* ))} */}
        //         {/* </Tabs >  */}
        //         {/* <View style={styles.StemNotificationBox}>
        //             {this.state.pageDatas.notificationList.map((item, index) => (
        //                 <TouchableOpacity key={index} onPress={() => {
        //                     // this.getUserMessagesList();
        //                     // 判断当前点击的功能菜单
        //                     this.layoutFunctionMenuList(item.title, item)
        //                     // 切换后已阅读
        //                     this.functionMenuLists(item)
        //                     // 系统菜单栏切换
        //                     this.notificaActionFN(index)
        //                     // this.props.navigation.push('functionMenuList', { data: item })
        //                 }}>
        //                     <View style={styles.itemNotification} key={index} >
        //                         {/* 消息通知清空 */}
        //         {/* {this.noticeStemNotification(item)}
        //                         <Image style={styles.systemPromptSystem} source={item.headPortrait} />
        //                         <Text style={item.SelectedState ?
        //                             styles.titleSystemAction : styles.titleSystemNo}>{item.systemTitle}</Text>
        //                     </View>
        //                 </TouchableOpacity>
        //             ))} */}
        //         {/* 取反则为StemNotificationBoxRegion */}
        //         {/* </View> */}
        //         {/* </> */}

        //     </View>
        // 弹窗模块
        const ModalWarper =
            <Modal
                animationType='fade'
                transparent={true}
                visible={isModal}
            >
                <View style={styles.warperModal} >
                    <View style={styles.modalStyle}>
                        {popUpList.map((item, index) => (
                            <TouchableOpacity key={index}
                                onPress={() => {
                                    if (item.url != 'selectcontact') {
                                        this.props.navigation.push(item.url)
                                        this.setState({
                                            isModal: false
                                        })
                                    } else {
                                        this.setState({
                                            isModal: false
                                        })
                                    }
                                }}>
                                <View style={styles.modalItem}>
                                    <Text style={styles.textModal}>
                                        {item.item}
                                    </Text>
                                </View>
                            </TouchableOpacity>
                        ))}
                        <ChatListRightButton />
                    </View>
                    <TouchableOpacity onPress={() => {
                        this.setState({
                            isModal: false
                        })
                    }} style={{ height: "100%" }}>
                    </TouchableOpacity>
                </View>
            </Modal>
        // 视频弹窗
        const video =
            <Modal
                animationType='fade'
                transparent={true}
                visible={isModalVideo}
            >
                <View style={styles.container}>
                    <View style={styles.contentWarper}>
                        <Video
                            ref={ref => (
                                this.videoPlayer = ref
                            )}
                            source={defaultV}
                            rate={1.0}
                            volume={1.0}
                            muted={false}
                            paused={!isPlaying}
                            resizeMode={'cover'}
                            playWhenInactive={false}
                            playInBackground={false}
                            ignoreSilentSwitch={'ignore'}
                            progressUpdateInterval={250.0}
                            style={styles.styleVideo}
                            repeat={true}
                        />
                        {/* 处理双击 */}
                        <TouchableOpacity enabled={false}
                            style={styles.msgBox}
                            onPress={() => {
                                this.clickT = this.clickT ||
                                    0;
                                this.clickTOut &&
                                    clearTimeout(this.clickTOut);
                                ++this.clickT;
                                this.clickTOut = setTimeout(() => {
                                    if (this.clickT == 2) {
                                        this.setState({
                                            isModalVideo: false
                                        })
                                    }
                                    this.clickT = 0;
                                }, 250);
                            }}>

                            <TouchableOpacity style={styles.cancel}
                                onPress={() =>
                                    this.isModalVideoNO()}>
                                <Image style={styles.cancelImag}
                                    source={del} />
                            </TouchableOpacity>
                            <View style={styles.videoScrollview}>
                                <View style={styles.textTBox}>
                                    <Text style={styles.textT}>双击屏幕并关闭</Text>
                                </View>
                                <ScrollView showsVerticalScrollIndicator={false}>
                                    <View style={styles.ItemBoxLeft} >
                                        <Image style={styles.SystemPromptLeft}
                                            source={portrait} />
                                        <View style={{ width: "75%" }}>
                                            <Text style={styles.userName}>小明</Text>
                                            <Text style={styles.news}>你可以给我一些帮助嘛？你可以给我一些帮助嘛？</Text>
                                        </View>
                                    </View>
                                    <View style={styles.ItemBoxLeft} >
                                        <Image style={styles.SystemPromptLeft}
                                            source={portrait} />
                                        <View style={{ width: "75%" }}>
                                            <Text style={styles.userName}>小明</Text>
                                            <Text style={styles.news}>你可以给我一些帮助嘛？你可以给我一些帮助嘛？</Text>
                                        </View>
                                    </View>
                                    <View style={styles.ItemBoxLeft} >
                                        <Image style={styles.SystemPromptLeft}
                                            source={portrait} />
                                        <View style={{ width: "75%" }}>
                                            <Text style={styles.userName}>小明</Text>
                                            <Text style={styles.news}>你可以给我一些帮助嘛？你可以给我一些帮助嘛？</Text>
                                        </View>
                                    </View>
                                    <View style={styles.ItemBoxLeft} >
                                        <Image style={styles.SystemPromptLeft}
                                            source={portrait} />
                                        <View style={{ width: "75%" }}>
                                            <Text style={styles.userName}>小明</Text>
                                            <Text style={styles.news}>你可以给我一些帮助嘛？你可以给我一些帮助嘛？</Text>
                                        </View>
                                    </View>
                                    <View style={styles.ItemBoxLeft} >
                                        <Image style={styles.SystemPromptLeft}
                                            source={portrait} />
                                        <View style={{ width: "75%" }}>
                                            <Text style={styles.userName}>小明</Text>
                                            <Text style={styles.news}>你可以给我一些帮助嘛？你可以给我一些帮助嘛？</Text>
                                        </View>
                                    </View>
                                    <View style={styles.ItemBoxLeft} >
                                        <Image style={styles.SystemPromptLeft}
                                            source={portrait} />
                                        <View style={{ width: "75%" }}>
                                            <Text style={styles.userName}>小明</Text>
                                            <Text style={styles.news}>你可以给我一些帮助嘛？你可以给我一些帮助嘛？</Text>
                                        </View>
                                    </View>
                                    <View style={styles.ItemBoxLeft} >
                                        <Image style={styles.SystemPromptLeft}
                                            source={portrait} />
                                        <View style={{ width: "75%" }}>
                                            <Text style={styles.userName}>小明</Text>
                                            <Text style={styles.news}>你可以给我一些帮助嘛？你可以给我一些帮助嘛？</Text>
                                        </View>
                                    </View>
                                    <View style={styles.ItemBoxLeft} >
                                        <Image style={styles.SystemPromptLeft}
                                            source={portrait} />
                                        <View style={{ width: "75%" }}>
                                            <Text style={styles.userName}>小明</Text>
                                            <Text style={styles.news}>你可以给我一些帮助嘛？你可以给我一些帮助嘛？</Text>
                                        </View>
                                    </View>
                                    <View style={styles.ItemBoxLeft} >
                                        <Image style={styles.SystemPromptLeft}
                                            source={portrait} />
                                        <View style={{ width: "75%" }}>
                                            <Text style={styles.userName}>小明</Text>
                                            <Text style={styles.news}>你可以给我一些帮助嘛？你可以给我一些帮助嘛？</Text>
                                        </View>
                                    </View>
                                    <View style={styles.ItemBoxLeft} >
                                        <Image style={styles.SystemPromptLeft}
                                            source={portrait} />
                                        <View style={{ width: "75%" }}>
                                            <Text style={styles.userName}>小明</Text>
                                            <Text style={styles.news}>你可以给我一些帮助嘛？你可以给我一些帮助嘛？</Text>
                                        </View>
                                    </View>
                                </ScrollView>
                            </View>
                            <TouchableOpacity style={styles.switchSkin}
                                onPress={() =>
                                    this.switchSkinFN()}>
                                <View style={styles.switchSkinBox}>
                                    <View style={styles.switch}>
                                        <Image style={styles.switchSkinImg}
                                            source={switchSkin} />
                                        <Text style={styles.text}>切换背景视频</Text>
                                    </View>
                                </View>
                            </TouchableOpacity>
                        </TouchableOpacity>
                    </View>
                </View>
            </Modal >
        return (
            <View style={styles.warper}>
                {/* 导航栏 */}
                <NavBar
                    navigation={this.props.navigation}
                    title={messageTitle}
                    rightImage={headerRightImage}
                    titleColor={"#333"}
                    hideLeftArrow={false}
                    pressRight={() => {
                        this.setState({
                            isModal: true
                        })
                    }}
                />
                {/* <ChatListRightButton /> */}
                <ChatList This={this} />
                {/* 搜索功能 */}
                {/* (transferDataTitle == "0" ? "好友" : null ||
                        transferDataTitle == "1" ? "群消息" : null ||
                            transferDataTitle == "2" ? "临时消息" : null ||
                                transferDataTitle == "3" ? "系统消息" : null) */}
                {/* <TextInput
                    inlineImagePadding={20}
                    inlineImageLeft='search_icon'
                    placeholder={"搜索" + transferDataTitle}
                    style={styles.inputstyle}
                /> */}
                {/* 消息列表 */}
                {/* {messageLayoutDefault ?
                    MessagePageLayoutBox : null} */}
                {/* {
                    messageLayoutDefault ?
                        <ScrollView >
                            <FunctionMenuList
                                transferDataTitle={transferDataTitle}
                                transferDataThis={this}
                                transferDataNotice={transferDataNotice}
                                stemNotificationTitle={stemNotificationTitle}
                            />
                        </ScrollView> : null} */}
                {/* 弹窗模块 */}
                {ModalWarper}

                {/* 弹窗视频 */}
                {/* {isModalVideo ? video : null} */}
                {/* 消息列表 */}
                {/* {!messageLayoutDefault ?
                    < ScrollView >
                        消息列表
                        {MessagePageLayoutBox}
                        菜单栏功能列表
                        <FunctionMenuList
                            transferDataThis={this}
                            transferDataTitle={transferDataTitle}
                            transferDataNotice={transferDataNotice}
                            stemNotificationTitle={stemNotificationTitle}
                        />
                    </ScrollView> : null} */}
                {/* <ScrollView>
                    <View style={styles.scrollViewConuion}>
                        {/* 消息列表 */}
                {/* {!messageLayoutDefault ? MessagePageLayoutBox : null} */}
                {/* 菜单栏功能列表 */}
                {/* <FunctionMenuList
                            transferDataTitle={transferDataTitle}
                            transferDataThis={this}
                            transferDataNotice={transferDataNotice}
                            stemNotificationTitle={stemNotificationTitle}
                        />
                    </View> */}
                {/* </ScrollView>  */}
            </View>
        )
    }
}
const styles = StyleSheet.create({
    warper: {
        flex: 1,
        backgroundColor: "#fff"
    },
    padlr: {
        paddingLeft: 15,
        paddingRight: 15,
    },
    StemNotificationBox: {
        flexDirection: "row",
        justifyContent: "space-between",
        paddingTop: 5,
        paddingBottom: 10,
        marginBottom: 10,
        borderBottomColor: "rgba(196, 196, 196, 0.14)",
        borderBottomWidth: 5,
    },
    inputstyle: {
        height: 40,
        backgroundColor: "rgba(196, 196, 196, 0.25)",
        borderRadius: 5,
        paddingLeft: 20,
        marginLeft: 15,
        marginRight: 15,
        marginBottom: 10
    },
    warperModal: {
        height: "100%",
        backgroundColor: "rgba(100,100,100,0.2)"
    },
    modalStyle: {
        paddingLeft: 10,
        paddingRight: 10,
        width: 100,
        backgroundColor: "#fff",
        borderRadius: 5,
        position: "absolute",
        zIndex: 10,
        top: "8%",
        right: "5%"
    },
    modalItem: {
        height: 40,
        borderBottomColor: "rgba(230,230,230,05)",
        borderBottomWidth: 0.5,
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "space-evenly"
    },
    textModal: {
        fontSize: 14,
        color: "#797979"
    },
    ItemBoxFriend: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        height: 70,
        marginTop: 10,
    },
    itemNotificationBox: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        height: 70,
        marginBottom: 8
    },
    itemNotification: {
        position: "relative",
        flexDirection: "column",
        alignItems: "center",
    },
    row: {
        flexDirection: "row"
    },
    promptNotification: {
        width: 48,
        height: 48,
        marginRight: 10
    },
    systemPromptSystem: {
        width: 45,
        height: 45,
        marginBottom: 10
    },
    titleSystemAction: {
        fontSize: 14,
        color: "#333",
    },
    titleSystemNo: {
        fontSize: 14,
        color: "#ccc",
    },
    titleNotification: {
        fontSize: 15,
        color: "#333",
        marginBottom: 7,
    },
    newsNotification: {
        fontSize: 13,
        color: "rgba(0, 0, 0, 0.41)",
    },
    timeRightFriend: {
        fontSize: 13,
        color: 'rgba(0, 0, 0, 0.41)'
    },

    noticeNotification: {
        width: 16,
        height: 16,
        borderRadius: 50,
        backgroundColor: "#FF0000",
        marginTop: 10,
        justifyContent: "center",
        alignItems: "center"
    },

    noticeStemNotification: {
        position: "absolute",
        top: 0,
        right: 1,
        // top: 13,
        // right: 30,
        zIndex: 20,
        width: 16,
        height: 16,
        borderRadius: 50,
        backgroundColor: "#FF0000",
        justifyContent: "center",
        alignItems: "center"
    },
    noticeStemText: {
        color: "#fff",
        fontSize: 10,
    },
    rowBoxBtn: {
        flexDirection: "column",
        alignItems: "flex-end"
    },
    container: {
        width: deviceWidth,
        height: deviceHeight,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "rgba(0,0,0,0.2)"
    },
    styleVideo: {
        width: deviceWidth,
        height: deviceHeight,
        position: "absolute",
        top: 0,
        zIndex: 10
    },
    msgBox: {
        position: "relative",
        zIndex: 30,
        width: "100%",
        height: "100%",
        flexDirection: "column-reverse",
    },
    contentWarper: {
        position: "relative",
        width: deviceWidth,
        height: deviceHeight,
        backgroundColor: "transparent",
    },
    cancel: {
        position: "absolute",
        top: "1%",
        left: "2%",
    },
    cancelImag: {
        width: 30,
        height: 30,
    },
    videoScrollview: {
        flexDirection: "column-reverse",
        justifyContent: "center",
        paddingLeft: "5%",
        paddingRight: "5%",
        marginBottom: "10%",
        height: deviceHeight - 400,
    },
    textT: {
        color: "#f5f5f5",
        fontSize: 14,
    },
    textTBox: {
        position: "absolute",
        top: 5,
        left: "40%",
        justifyContent: "center",
        alignItems: "center",
    },

    ItemBoxLeft: {
        marginTop: 5,
        marginBottom: 10,
        width: '100%',
        flexDirection: "row",
        justifyContent: "flex-start"
    },

    SystemPromptLeft: {
        width: 45,
        height: 45,
        marginRight: 10,
        borderRadius: 50
    },
    userName: {
        color: "#fff",
        fontSize: 15,
        marginBottom: 3
    },
    news: {
        fontSize: 13,
        color: "#fff",
        padding: 10,
        backgroundColor: "rgba(0,0,0,0.3)",
        borderRadius: 10
    },
    switchSkin: {
        width: 60,
        height: 60,
        position: "absolute",
        bottom: 0,
        right: 0,
        zIndex: 22,
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#fff",
        borderTopStartRadius: 100,
        borderBottomRightRadius: 6
    },
    switchSkinBox: {
        marginLeft: 10,
        marginTop: 10
    },
    switch: {
        flexDirection: "column",
        justifyContent: "space-around",
        alignItems: "center"
    },
    switchSkinImg: {
        width: 23,
        height: 23,
    },
    text: {
        fontSize: 8,
        color: "#1890FF"
    },


})